<template>
  <div class="payment-settings">
    <div class="page-header">
      <h2>支付设置</h2>
    </div>

    <el-tabs v-model="activeTab" type="border-card">
      <!-- 微信支付设置 -->
      <el-tab-pane label="微信支付" name="wechat">
        <el-form :model="wechatConfig" label-width="120px" class="config-form">
          <el-form-item label="启用状态">
            <el-switch v-model="wechatConfig.enabled" />
          </el-form-item>
          
          <el-form-item label="应用ID">
            <el-input v-model="wechatConfig.appId" placeholder="请输入微信应用ID" />
          </el-form-item>
          
          <el-form-item label="商户号">
            <el-input v-model="wechatConfig.mchId" placeholder="请输入微信商户号" />
          </el-form-item>
          
          <el-form-item label="API密钥">
            <el-input 
              v-model="wechatConfig.apiKey" 
              type="password" 
              show-password 
              placeholder="请输入API密钥"
            />
          </el-form-item>
          
          <el-form-item label="证书路径">
            <el-input v-model="wechatConfig.certPath" placeholder="请输入证书文件路径" />
          </el-form-item>
          
          <el-form-item label="回调地址">
            <el-input v-model="wechatConfig.notifyUrl" placeholder="支付结果通知地址" />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveWechatConfig">保存配置</el-button>
            <el-button @click="testWechatConfig">测试连接</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 支付宝设置 -->
      <el-tab-pane label="支付宝" name="alipay">
        <el-form :model="alipayConfig" label-width="120px" class="config-form">
          <el-form-item label="启用状态">
            <el-switch v-model="alipayConfig.enabled" />
          </el-form-item>
          
          <el-form-item label="应用ID">
            <el-input v-model="alipayConfig.appId" placeholder="请输入支付宝应用ID" />
          </el-form-item>
          
          <el-form-item label="私钥">
            <el-input 
              v-model="alipayConfig.privateKey" 
              type="textarea" 
              :rows="4"
              placeholder="请输入应用私钥"
            />
          </el-form-item>
          
          <el-form-item label="公钥">
            <el-input 
              v-model="alipayConfig.publicKey" 
              type="textarea" 
              :rows="4"
              placeholder="请输入支付宝公钥"
            />
          </el-form-item>
          
          <el-form-item label="回调地址">
            <el-input v-model="alipayConfig.notifyUrl" placeholder="支付结果通知地址" />
          </el-form-item>
          
          <el-form-item label="网关地址">
            <el-select v-model="alipayConfig.gateway" placeholder="请选择网关">
              <el-option label="正式环境" value="https://openapi.alipay.com/gateway.do" />
              <el-option label="沙箱环境" value="https://openapi.alipaydev.com/gateway.do" />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveAlipayConfig">保存配置</el-button>
            <el-button @click="testAlipayConfig">测试连接</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 银联支付设置 -->
      <el-tab-pane label="银联支付" name="unionpay">
        <el-form :model="unionpayConfig" label-width="120px" class="config-form">
          <el-form-item label="启用状态">
            <el-switch v-model="unionpayConfig.enabled" />
          </el-form-item>
          
          <el-form-item label="商户号">
            <el-input v-model="unionpayConfig.merId" placeholder="请输入银联商户号" />
          </el-form-item>
          
          <el-form-item label="签名证书">
            <el-input v-model="unionpayConfig.certPath" placeholder="请输入签名证书路径" />
          </el-form-item>
          
          <el-form-item label="证书密码">
            <el-input 
              v-model="unionpayConfig.certPassword" 
              type="password" 
              show-password 
              placeholder="请输入证书密码"
            />
          </el-form-item>
          
          <el-form-item label="回调地址">
            <el-input v-model="unionpayConfig.notifyUrl" placeholder="支付结果通知地址" />
          </el-form-item>
          
          <el-form-item label="环境">
            <el-select v-model="unionpayConfig.environment" placeholder="请选择环境">
              <el-option label="生产环境" value="production" />
              <el-option label="测试环境" value="test" />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveUnionpayConfig">保存配置</el-button>
            <el-button @click="testUnionpayConfig">测试连接</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 通用设置 -->
      <el-tab-pane label="通用设置" name="general">
        <el-form :model="generalConfig" label-width="120px" class="config-form">
          <el-form-item label="支付超时">
            <el-input-number 
              v-model="generalConfig.timeout" 
              :min="1" 
              :max="1440"
              controls-position="right"
            />
            <span class="unit">分钟</span>
          </el-form-item>
          
          <el-form-item label="自动退款">
            <el-switch v-model="generalConfig.autoRefund" />
            <span class="help-text">支付失败时是否自动退款</span>
          </el-form-item>
          
          <el-form-item label="退款超时">
            <el-input-number 
              v-model="generalConfig.refundTimeout" 
              :min="1" 
              :max="30"
              controls-position="right"
            />
            <span class="unit">天</span>
          </el-form-item>
          
          <el-form-item label="手续费率">
            <el-input-number 
              v-model="generalConfig.feeRate" 
              :min="0" 
              :max="5"
              :precision="2"
              :step="0.01"
              controls-position="right"
            />
            <span class="unit">%</span>
          </el-form-item>
          
          <el-form-item label="最小金额">
            <el-input-number 
              v-model="generalConfig.minAmount" 
              :min="0.01" 
              :precision="2"
              controls-position="right"
            />
            <span class="unit">元</span>
          </el-form-item>
          
          <el-form-item label="最大金额">
            <el-input-number 
              v-model="generalConfig.maxAmount" 
              :min="1" 
              :precision="2"
              controls-position="right"
            />
            <span class="unit">元</span>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="saveGeneralConfig">保存配置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'PaymentSettings',
  setup() {
    const activeTab = ref('wechat')
    
    // 微信支付配置
    const wechatConfig = reactive({
      enabled: true,
      appId: '',
      mchId: '',
      apiKey: '',
      certPath: '',
      notifyUrl: ''
    })
    
    // 支付宝配置
    const alipayConfig = reactive({
      enabled: true,
      appId: '',
      privateKey: '',
      publicKey: '',
      notifyUrl: '',
      gateway: 'https://openapi.alipay.com/gateway.do'
    })
    
    // 银联支付配置
    const unionpayConfig = reactive({
      enabled: false,
      merId: '',
      certPath: '',
      certPassword: '',
      notifyUrl: '',
      environment: 'production'
    })
    
    // 通用配置
    const generalConfig = reactive({
      timeout: 30,
      autoRefund: true,
      refundTimeout: 7,
      feeRate: 0.6,
      minAmount: 0.01,
      maxAmount: 50000.00
    })
    
    // 加载配置
    const loadConfigs = async () => {
      try {
        // 这里调用API加载配置
        console.log('加载支付配置')
      } catch (error) {
        ElMessage.error('加载配置失败')
      }
    }
    
    // 保存微信配置
    const saveWechatConfig = async () => {
      try {
        // 这里调用API保存配置
        ElMessage.success('微信支付配置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 测试微信配置
    const testWechatConfig = async () => {
      try {
        // 这里调用API测试连接
        ElMessage.success('微信支付连接测试成功')
      } catch (error) {
        ElMessage.error('连接测试失败')
      }
    }
    
    // 保存支付宝配置
    const saveAlipayConfig = async () => {
      try {
        // 这里调用API保存配置
        ElMessage.success('支付宝配置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 测试支付宝配置
    const testAlipayConfig = async () => {
      try {
        // 这里调用API测试连接
        ElMessage.success('支付宝连接测试成功')
      } catch (error) {
        ElMessage.error('连接测试失败')
      }
    }
    
    // 保存银联配置
    const saveUnionpayConfig = async () => {
      try {
        // 这里调用API保存配置
        ElMessage.success('银联支付配置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    // 测试银联配置
    const testUnionpayConfig = async () => {
      try {
        // 这里调用API测试连接
        ElMessage.success('银联支付连接测试成功')
      } catch (error) {
        ElMessage.error('连接测试失败')
      }
    }
    
    // 保存通用配置
    const saveGeneralConfig = async () => {
      try {
        // 这里调用API保存配置
        ElMessage.success('通用配置保存成功')
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }
    
    onMounted(() => {
      loadConfigs()
    })
    
    return {
      activeTab,
      wechatConfig,
      alipayConfig,
      unionpayConfig,
      generalConfig,
      saveWechatConfig,
      testWechatConfig,
      saveAlipayConfig,
      testAlipayConfig,
      saveUnionpayConfig,
      testUnionpayConfig,
      saveGeneralConfig
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-settings {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    color: var(--text-color-primary);
    font-weight: 500;
  }
}

.config-form {
  max-width: 600px;
  
  .unit {
    margin-left: 10px;
    color: var(--text-color-regular);
  }
  
  .help-text {
    margin-left: 10px;
    font-size: 12px;
    color: var(--text-color-secondary);
  }
}
</style> 